<template>
	<view class="" style="padding-bottom: 200rpx;">
		<Header :title="subjectList.topic" :isHome="true" :isWhite='true'></Header>
		<view class="">

			<view class="main" :key="index">
				<span class="typeLogo" v-if="subjectList.answer_type=='FILL'">
					填空题
				</span>
				<span class="typeLogo" v-if="subjectList.answer_type=='JUDGE'">
					判断题
				</span>
				<span class="typeLogo" v-if="subjectList.answer_type=='ONE'">
					单选
				</span>
				<span class="typeLogo" v-if="subjectList.answer_type=='MANY'">
					多选
				</span>
				<span class="title">{{subjectList.topic}}</span>
				<!-- <span class="title" v-if="(showMath||showEnglish)&&subjectList.answer_type=='FILL'"
					style="margin-right: 10rpx;">=?</span> -->
				<!-- 填空选项 -->
				<span class="title" v-if="subjectList.answer_type=='FILL'"
					style="margin-right: 10rpx; margin-top: 40rpx;display: flex;align-items: center;">请输入答案： <input
						type="text" v-model="fillAnswer"
						style="width: 50%;border-bottom: 1px solid #000;padding: 0 20rpx;" /> </span>

				<view class="" v-if="subjectList.images" v-for="i in subjectList.images">
					<image :src="imgUrl+i" mode="" class="textbook"></image>
				</view>

				<!-- 数字键盘 -->
				<view class="chapterAll" v-if="showMath && subjectList.answer_type=='FILL'">
					<view class="chapterMath" v-for="(itm,inx) in numList" :key="inx" @click="chooseNum(itm)">
						<view style="display: flex;align-items: center;justify-content: center;">
							<image v-if="itm.num=='X'" src="../../static/del.png" mode="" class="del"></image>
							<view class="" v-else>
								{{itm.num}}
							</view>
							<image src="/static/one.png" mode="" class="one"></image>
						</view>
					</view>
				</view>
				<!-- 英文键盘 -->
				<view class="chapterAll1" v-if="showEnglish && subjectList.answer_type === 'FILL'">
					<view class="chapterEnglish" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
						<view class="key" v-for="(key, keyIndex) in row" :key="keyIndex" @click="chooseKey(key)"
							:style="key=='del'||key=='.'?'width:80rpx;':''">
							<view style="display: flex;align-items: center;justify-content: center;">
								<image v-if="key=='del'" src="../../static/del.png" mode="" class="del"></image>
								<view class="" v-else>
									{{key}}
								</view>
								<image src="/static/one.png" mode="" class="tow"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- 选项 -->

				<!-- 多选 -->
				<view v-if="subjectList.answer_type === 'MANY'">
					<view :class="isSelectedMany(inx)?'chapter-active':'chapter'"
						v-for="(itm,inx) in subjectList.option" :key="inx" @click="chooseAnswerMany(itm,inx)">
						<view class="flex">
							<view class="">
								{{inx}}.{{itm}}
							</view>
							<image src="/static/three.png" mode="" class="three"></image>
						</view>
					</view>
				</view>
				<!-- 单选 -->
				<view v-else>
					<view :class="isSelectedOne(inx)?'chapter-active':'chapter'" v-for="(itm,inx) in subjectList.option"
						:key="inx" @click="chooseAnswer(itm,inx)">
						<view class="flex">
							<view class="">
								{{inx}}.{{itm}}
							</view>
							<image src="/static/three.png" mode="" class="three"></image>
						</view>
					</view>
				</view>

				<view class="" v-if="show">
					<view class="all">
						<view class="answer">
							<view class="">
								<view class="rightAnswer">
									正确答案：<span>{{subjectList.answer}}</span>
								</view>
								<view :class="isTrue == 1?'selectedAnswerRight':'selectedAnswerWrong'">
									已选答案：<span v-if="subjectList.answer_type=='MANY'">{{selectedAnswers}}</span>
									<span v-else-if="subjectList.answer_type=='FILL'">{{fillAnswer}}</span>
									<span v-else>{{selectedAnswer}}</span>
								</view>
							</view>
							<view class="" v-if="isTrue == 1">
								<image src="/static/right.png" mode="" class="wrong"></image>
							</view>
							<view class="" v-if="isTrue == 2">
								<image src="/static/wrong.png" mode="" class="wrong"></image>
							</view>
						</view>
						<view class="similarityCase" v-if="isTrue == 2">
							<view class="similarityCaseBtn"
								@click="goPage('/subpages/banner/sameSubject?id='+subjectList.questions_id)">
								访题案例
							</view>
						</view>

					</view>
					<view class="" v-if="isTrue == 2">
						<view class="jeixititle">
							题目解析
						</view>
						<view class="content" style="white-space: pre-line;">
							{{answerJiexi}}
							<!-- 这句诗不完全正确。正确的诗句应该是:“床前明月光，疑是地上霜。举头望明月，低头思故乡。”这首诗出自唐代诗人李白的《静夜思》 -->
						</view>
						<!-- <image src="" mode="" class="station"></image> -->
					</view>
				</view>

			</view>
			<view class="bottom" v-if="subjectList.answer_type=='MANY' || subjectList.answer_type=='FILL'">
				<view class="submitBtn" @click="submitAnswer()">
					提交答案
				</view>
			</view>

			<view class="counselorAll" @click="showCou=true" v-if="!show">
				<image src="/static/counselor.png" mode="" class="counselor"></image>
				<view class="">
					学习顾问
				</view>
			</view>
			<view>
				<u-popup :show="showCou" :round="12" mode="center" @close="close" @open="open">
					<view class="popContent">
						<view class="title">学习顾问</view>
						<view class="">
							<image :src="imgUrl+qrcode" mode="" class="qr" @click="handleLook(imgUrl+qrcode)"></image>
						</view>
						<view class="popCon">
							长按微信二维码
						</view>
						<view class="popCon">
							学习顾问将为您的学习提供服务
						</view>
						<image src="/static/close.png" mode="" class="close" @click="showCou=false"></image>
					</view>
				</u-popup>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url,
		post
	} from '../../utils/request';
	export default {
		data() {
			return {
				imgUrl: img_url,
				qrcode: '',
				id: '',
				countdownSeconds: 30,
				countSeconds: 5,
				show: false,
				showCou: false,
				title: '题目标题',
				choseAnswer: '',
				selectedOptions: {},
				optionSelected: {},
				selectedAnswer: {}, // 存储单选答案
				selectedAnswers: [], // 存储多选答案
				fillAnswer: '',
				isTrue: null,
				info: {},
				subjectList: {
					id: 1,
					title: '汽车的单词=？',
					score: '10',
					type: '2', //填空题
					textbook: '/static/textbook.png',
					rightAnswer: 'car',
					optionList: [{
							id: 11,
							title: 'car'
						},
						{
							id: 12,
							title: 'what'
						},
						{
							id: 13,
							title: 'cat'
						}
					]
				},
				answerJiexi: '',
				accumulatedAnswer: '',
				showMath: false, //是否显示数字键盘
				showEnglish: false, //是否显示英语键盘
				keyboardLayout: [
					['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
					['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
					['.', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'del']
				],
				numList: [{
						num: 1,
					},
					{
						num: 2,
					},
					{
						num: 3,
					},
					{
						num: 4,
					},
					{
						num: 5,
					},
					{
						num: 6,
					},
					{
						num: 7,
					},
					{
						num: 8,
					},
					{
						num: 9,
					},
					{
						num: '.',
					},
					{
						num: 0,
					},
					{
						num: 'X',
					}
				],

			}
		},
		onLoad(options) {
			this.id = options.id
			if (options.info) {
				this.info = JSON.parse(options.info)
			}
			this.startCountdown()
			this.getWrongInfo()
			this.getQrcode()
		},
		methods: {
			chooseNum(itm) {
				if (itm.num === 'X') {
					this.accumulatedAnswer = ''
					this.fillAnswer = ''
					this.$forceUpdate()
				} else {
					const currentAnswer = itm.num
					this.accumulatedAnswer += currentAnswer
					this.fillAnswer = this.accumulatedAnswer
				}
			},
			chooseKey(key) {
				if (key === 'del') {
					this.accumulatedAnswer = this.accumulatedAnswer.slice(0, -1);
					this.fillAnswer = this.fillAnswer.slice(0, -1);
					this.$forceUpdate()
				} else {
					const currentAnswer = key
					this.accumulatedAnswer += currentAnswer
					this.fillAnswer = this.accumulatedAnswer
				}
			},
			getWrongInfo() {
				get('/paper/get_wrong_info?wrong_id=' + this.id).then(res => {
						this.subjectList = res.data
						if (res.data.subject_name == '数学') {
							this.showMath = true
						}
						if (res.data.subject_name == '英语') {
							this.showEnglish = true
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			next() {
				const count = this.count + 1
				if (count != this.totalCount) {
					this.count++
				}
			},
			previous() {
				if (this.count > 0) {
					this.count--
					if (this.selectedOptions[this.count] !== undefined) {
						this.$nextTick(() => {});
					}
				}
			},
			radioChange(e) {
				console.log(e, 'eee');
			},
			getQrcode() {
				get('/system/get_contact')
					.then(res => {
						this.qrcode = res.data.qrcode
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			submit() {
				uni.navigateTo({
					url: '/subpages/banner/practiceResult'
				})
			},
			startCountdown() {
				const timer = setInterval(() => {
					if (this.countdownSeconds > 0) {
						this.countdownSeconds--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
			},
			startCount() {
				const timer = setInterval(() => {
					if (this.countSeconds > 0) {
						this.countSeconds--;
					} else {
						clearInterval(timer);
					}
				}, 1000);
			},

			// 检查单选是否选中
			isSelectedOne(index) {
				return this.selectedAnswer === index;
			},
			// 检查多选是否选中
			isSelectedMany(index) {
				return this.selectedAnswers.includes(index);
			},
			// 单选
			chooseAnswer(itm, idx) {
				this.selectedAnswer = idx;
				this.$forceUpdate();
				if (Array.isArray(idx)) {
					var q_answer = JSON.parse(this.subjectList.answer)
				} else {
					var q_answer = this.subjectList.answer
				}
				post('/paper/submit_paper', {
						q_answer: q_answer,
						answer: idx,
						answer_type: this.subjectList.answer_type
					}).then(res => {
						this.isTrue = res.data
						this.editRanking()
						if (res.data == 1) {
							this.editWrongInfo()
						}else{
							// 错题
							this.getWrongSend()
						}
						this.show = true
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			editWrongInfo() {
				post('/paper/edit_wrong_practice', {
						wrong_id: this.id
					}).then(res => {

					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			editRanking() {
				get('/paper/wrong_refresh_ranking?subject_id=' + this.subjectList.subject_id + '&grade_id=' + this
						.subjectList.grade_id)
					.then(res => {

					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			// 多选
			chooseAnswerMany(option, index) {
				const indexInSelected = this.selectedAnswers.indexOf(index);
				if (indexInSelected > -1) {
					// 已选中，取消选择
					this.selectedAnswers.splice(indexInSelected, 1);
				} else {
					// 未选中，添加选择
					this.selectedAnswers.push(index);
				}
				console.log(this.selectedAnswers);
			},

			// 填空 和 多选
			submitAnswer() {
				if (this.subjectList.answer_type == "FILL") {
					var answer = this.fillAnswer
				} else {
					var answer = this.selectedAnswers
				}
				var q_answer = this.subjectList.answer
				post('/paper/submit_paper', {
						q_answer: q_answer,
						answer: answer,
						answer_type: this.subjectList.answer_type
					}).then(res => {
						if (res.code == 1) {
							this.isTrue = res.data
							this.show = true
							this.editRanking()
							if (res.data == 1) {
								this.editWrongInfo()
							} else {
								// 错题
								this.getWrongSend()
							}
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getWrongSend() {
				uni.showLoading()
				get('/ai/wrong_send?type=2&wrong_id=' + this.subjectList.id).then(res => {
						if (res.code == 1) {
							this.answerJiexi = res.data
							uni.hideLoading()
						} else {
							uni.showToast({
								title: res.msg
							})
							uni.hideLoading()
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			goBack() {
				uni.navigateBack()
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.one {
		width: 21rpx;
		height: 34rpx;
		position: absolute;
		top: -12rpx;
		right: 21rpx;
	}

	.chapterAll1 {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;

		.chapterEnglish {
			display: flex;
			justify-content: center;
			margin-bottom: 10px;
		}

		.key {
			background: #FFFFFF;
			border: 3rpx solid #222222;
			border-radius: 12rpx;
			position: relative;
			box-sizing: border-box;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			width: 60rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 10rpx;
			cursor: pointer;
		}

		.del {
			height: 34rpx;
			width: 44rpx;
		}

		.tow {
			width: 21rpx;
			height: 34rpx;
			position: absolute;
			top: -10rpx;
			right: 5rpx;
		}
	}

	.chapterAll {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 100rpx;

		.chapterMath {
			width: 212rpx;
			text-align: center;
			background: #FFFFFF;
			border: 3rpx solid #222222;
			border-radius: 12rpx;
			position: relative;
			margin: 20rpx auto;
			padding: 28rpx;
			box-sizing: border-box;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.del {
			height: 48rpx;
			width: 64rpx;
		}
	}

	.jeixititle {
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 32rpx;
		color: #222222;
		margin: 30rpx 0;
	}

	.content {
		font-size: 28rpx;
		margin-bottom: 30rpx;
	}

	.station {
		width: 686rpx;
		height: 200rpx;
		background-color: #F5F5F5;
		margin-bottom: 30rpx;
	}

	.counselorAll {
		width: 108rpx;
		height: 108rpx;
		background: #FFFFFF;
		border: 2rpx solid #DDDDDD;
		border-radius: 50%;
		box-sizing: border-box;
		box-shadow: 0 6rpx 18rpx 0 #00000014;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 20rpx;
		color: #222222;
		text-align: center;
		padding: 20rpx 0;
		position: fixed;
		bottom: 200rpx;
		right: 20rpx;

		.counselor {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.similarityCase {
		display: flex;
		justify-content: flex-end;
		border-top: 2rpx solid #ccc;
		padding-top: 20rpx;

		.similarityCaseBtn {
			border: 3rpx solid #222;
			border-radius: 8rpx;
			padding: 10rpx;
		}
	}

	.all {
		width: 686rpx;
		background: #F0F0F0;
		padding: 28rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		margin: 20rpx auto;

		.allBtn {
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 0;
			border-top: 1rpx solid #ccc;
			margin-top: 20rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #1A1A1A;

			view {
				width: 144rpx;
				height: 56rpx;
				border-radius: 6rpx;
				text-align: center;
				line-height: 56rpx;
			}

			.case {
				border: 2rpx solid #1A1A1A;
			}

			.analysis {
				margin-left: 20rpx;
				background: #FFD275;

			}
		}
	}

	.answer {

		display: flex;
		align-items: center;
		justify-content: space-between;

		.wrong {
			width: 100rpx;
			height: 100rpx;
		}

		.rightAnswer {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
		}

		.selectedAnswerRight {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #38BD69;
			}
		}

		.selectedAnswerWrong {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #F54040;
			}
		}
	}

	.boardAll {
		width: 196rpx;
		height: 64rpx;
		background: #F5F5F5;
		border: 1rpx solid #DDDDDD;
		border-radius: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 24rpx;
		color: #222222;
		margin: 20rpx auto;

		view {
			margin-right: 10rpx;
		}

		.board {
			width: 36rpx;
			height: 36rpx;
			display: block;
			margin-right: 20rpx;
		}

		.toright {
			width: 24rpx;
			height: 24rpx;
			display: block;
		}
	}

	.popContent {
		width: 630rpx;
		height: 774rpx;
		border-radius: 24rpx;
		text-align: center;
		position: relative;

		.popCon {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #555555;
			margin: 20rpx 0;
		}

		.close {
			position: absolute;
			width: 72rpx;
			height: 72rpx;
			bottom: -100rpx;
			left: 280rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #1A1A1A;
			margin: 50rpx 0;

		}


		.qr {
			width: 400rpx;
			height: 400rpx;
		}

		.allBtn {
			display: flex;
			justify-content: center;
			margin-top: 60rpx;

			view {
				width: 239rpx;
				height: 96rpx;
				border-radius: 48rpx;
				text-align: center;
				line-height: 96rpx;
			}

			.fanhui {
				margin-right: 20rpx;
				background: #FFFFFF;
				border: 2rpx solid #1A1A1A;
			}

			.continue {
				background: #FFD275;
			}
		}
	}

	// .chapterAll {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	flex-wrap: wrap;
	// }

	// .chapterMath {
	// 	width: 212rpx;
	// 	text-align: center;
	// 	background: #FFFFFF;
	// 	border: 3rpx solid #222222;
	// 	border-radius: 12rpx;
	// 	position: relative;
	// 	margin: 20rpx auto;
	// 	padding: 28rpx;
	// 	box-sizing: border-box;
	// 	font-family: PingFangSC-SNaNrpxibold;
	// 	font-weight: 600;
	// 	font-size: 28rpx;
	// 	color: #222222;


	// }

	.chapter {
		width: 686rpx;
		text-align: center;
		background: #FFFFFF;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;


	}


	.one {
		width: 21rpx;
		height: 34rpx;
		position: absolute;
		top: -12rpx;
		right: 21rpx;
	}

	.chapter-active {
		width: 686rpx;
		text-align: center;
		background: #ffebc2;
		border: 3rpx solid #222222;
		border-radius: 12rpx;
		position: relative;
		margin: 20rpx auto;
		padding: 28rpx;
		box-sizing: border-box;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 28rpx;
		color: #222222;
	}




	.topOn {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 32rpx;
		background-color: #fff;
		position: sticky;

		.schedule {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
			margin-right: 20rpx;
		}

		.count {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.totalCount {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.countdownTitle {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 28rpx;
			color: #222222;
			margin-right: 20rpx;
		}

		.countdownSeconds {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #F54040;
		}
	}

	.main {
		padding: 30rpx;

		.uni-list-cell {
			position: relative;
			display: flex;
			align-items: center;
			padding: 20rpx;
			border: 3rpx solid #222;
			border-radius: 12rpx;
			margin: 40rpx 0;
			background-color: #fff;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 28rpx;
			color: #222222;
		}

		.typeLogo {
			background-image: linear-gradient(90deg, #FAE17D 0%, #FFD275 100%);
			border-radius: 4rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #222222;
			padding: 5rpx 10rpx;
			margin-right: 20rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #222222;
		}

		.three {
			width: 66rpx;
			height: 34rpx;
			position: absolute;
			top: -12rpx;
			right: 54rpx;
		}
	}

	.textbook {
		width: 686rpx;
		height: 300rpx;
		margin: 20rpx auto 0;
	}

	.bottom {
		position: fixed;
		width: 100%;
		// height: 188rpx;
		padding-bottom: 50rpx;
		bottom: 0;
		background-color: #fff;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;

		.submitBtn {
			width: 510rpx;
			height: 96rpx;
			background: #FFD275;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #1A1A1A;
			text-align: center;
			line-height: 96rpx;
			margin: 20rpx auto 0;
		}

		.bottom-info {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 35rpx 0;
			box-sizing: border-box;

			.count {
				color: #222222;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 600;
				line-height: 36rpx;
			}

			.totalCount {
				color: #999999;
				font-size: 26rpx;
				font-family: PingFangSC;
				font-weight: 400;
			}

			.changeBtn {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #222222;
				border-radius: 8rpx;
			}

			.changeBtndis {
				width: 130rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				margin-right: 20rpx;
				border: 2rpx solid #ccc;
				border-radius: 8rpx;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 26rpx;
				color: #CCCCCC;
			}
		}

		.bottom-flex {
			display: flex;
		}
	}
</style>